<template>
    <div class="content">
        <el-tabs type="border-card" v-model="ns" @tab-click="getPageList">
            <el-tab-pane v-for="(item, index) in nss" :key="index" :label="item" :name="item" lazy>
                <el-row>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="数据源">
                            <el-input v-model="ds" placeholder="数据源"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                            <el-button type="primary" icon="el-icon-refresh-right" @click="handleClear">重置</el-button>
                            <el-button type="primary" icon="el-icon-circle-plus" @click="editHandle(true,item)">新增</el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="handleBatchDel()">批量删除</el-button>
                            <el-button type="primary" icon="el-icon-copy-document" @click="clickClone(ns,'DS')">克隆</el-button>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-table ref="multipleTable" :data="pageData.list" border fit style="width: 100%" :header-row-style="() => { return 'line-height:20px'; }" highlight-current-row
                    :header-cell-style="{background: 'rgb(55, 60, 100)',color: '#FFFFFF',textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40"></el-table-column>
                    <el-table-column prop="ds" label="数据源"></el-table-column>
                    <el-table-column prop="dbType" label="数据库类型"></el-table-column>
                    <el-table-column prop="host" label="主机地址"></el-table-column>
                    <el-table-column prop="port" label="端口" width="70"></el-table-column>
                    <el-table-column prop="username" label="用户"></el-table-column>
                    <el-table-column prop="dbName" label="数据库"></el-table-column>
                    <el-table-column prop="connectionTimeout" label="连接超时(ms)"></el-table-column>
                    <el-table-column prop="idleTimeout" label="连接空闲超时(ms)"></el-table-column>
                    <el-table-column prop="maxLifetime" label="连接最大生命时间(ms)"></el-table-column>
                    <el-table-column prop="leakDetectionThreshold" label="连接占用超时(ms)"></el-table-column>
                    <el-table-column prop="minIdle" label="最小空闲连接数(个)"></el-table-column>
                    <el-table-column prop="maxPoolSize" label="最大连接数(个)"></el-table-column>
                    <el-table-column prop="validationTimeout" label="连接验证超时(ms)"></el-table-column>
                    <el-table-column prop="connectionTestQuery" label="连接测试查询"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
                    <el-table-column prop="mapper" fixed="right" label="查看" width="110">
                        <template slot-scope="scope">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    <el-button type="text" icon="el-icon-menu" circle></el-button>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <el-button type="text" icon="el-icon-menu" size="small" @click="hanldeChangeView('/mapper', { ns: scope.row.ns,ds: scope.row.ds})" round>Mapper</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button type="text" icon="el-icon-menu" size="small" @click="hanldeChangeView('/template', { ns: scope.row.ns,ds: scope.row.ds})" round>模板管理</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button type="text" icon="el-icon-menu" size="small" @click="hanldeChangeView('/generator', {ns: scope.row.ns,ds: scope.row.ds}) " round>代码生成</el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="110">
                        <template slot-scope="scope">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    <el-button type="text" icon="el-icon-setting" circle>更多</el-button>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <el-button type="text" icon="el-icon-delete" @click="handleDel(scope.row.ds)" size="small">删除</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button type="text" icon="el-icon-edit" @click="editHandle(false,scope.row.ns,scope.row.ds)" size="small">编辑</el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageData.totalCount">
                </el-pagination>
            </el-tab-pane>
            <!-- 弹窗, 新增 / 修改 -->
            <!-- 通过@refreshDataList自定义事件给新增和编辑组件传递函数调用 -->
            <add-or-update v-if="visible" ref="addOrUpdate" @refreshDataList="refreshDataList"></add-or-update>
            <!-- 弹窗, 克隆 -->
            <clone v-if="cloneOpen" ref="cloneRef" @refreshDataList="refreshDataList"></clone>
        </el-tabs>
    </div>
</template>
<script>

    import { dsClone, dsDel, dsPage } from '../../api/ds'
    import { nsData, dsCloneData } from '../../mixins/mixin'
    import AddOrUpdate from './AddOrUpdate.vue'
    import Clone from './Clone.vue'

    export default {
        mounted() {
            if (this.$route.query) {
                if (this.$route.query.ns !== undefined && this.$route.query.ns !== '') {
                    this.ns = this.$route.query.ns
                }
            }
            this.getNsList()
            this.getPageList()
        },
        components: {
            AddOrUpdate,
            Clone
        },
        computed: {
        },
        mixins: [nsData, dsCloneData],
        data() {
            return {
                visible: false,
                loading: false,
                ds: ''
            }
        },
        methods: {
            refreshDataList() {
                this.cloneOpen = false
                this.visible = false
                this.getPageList();
            },
            // 新增 / 修改
            editHandle(isAdd, ns, ds) {
                this.visible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(isAdd, ns, ds)
                })
            },
            handleSelectionChange(selection) {
                this.multipleSelection = selection.map(item => item.ds);
                this.multipleCloneInfo = selection.map(item => { return { ds: item.ds } });
            },
            handleBatchDel() {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        type: 'info',
                        message: '请选择需要删除的数据'
                    })
                } else {
                    this.$confirm('确认要删除吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        dsDel(this.ns, this.multipleSelection).then((res) => {
                            this.$message({ message: '删除成功！', type: 'success' })
                            this.getPageList()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        })
                    })
                }
            },
            handleClear() {
                this.ds = ''
                this.getPageList()
            },
            getPageList() {
                dsPage(this.ns, this.ds, this.page.page, this.page.limit).then((res) => {
                    let data = res.data
                    this.pageData = data
                })
            }
        }
    }
</script>

<style scoped>
.content {
    margin: 20px 0px;
}
.el-table {
    margin: 20px 0px;
}
.el-row {
    margin-bottom: 20px;
    line-height: 10px;
}
.el-form-item {
    margin: 20px 0px;
    font-weight: bold;
    text-align: left;
}
.selection-button {
    margin-top: 20px;
    left: 0%;
}
</style>
